{% extends "base/base.html" %}
{% load static %}

{% block title %}{{ title }} - 多用户报警系统{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/scheduled_tasks_fix.css' %}">
<link rel="stylesheet" href="/static/css/scheduled_tasks_fix.css">
<style>
/* 页面特定的额外样式 */

/* 描述文本悬停效果增强 */
.description-container {
    transition: all 0.2s ease;
}

/* 表格行的淡入效果 */
.task-row {
    animation: fadeIn 0.3s ease-out;
}

.description-container:hover {
    overflow: visible;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    white-space: normal;
    max-width: 350px;
}

/* 任务统计卡片样式修复 */
.task-stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 0.5rem;
    overflow: hidden;
    height: 100%;
}

.task-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.task-stat-card .card-body {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 统计数字标题基本样式 */
.task-stat-card h4.card-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.task-stat-card p.card-text {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.task-stat-card .fa {
    animation: pulse 2s infinite;
    font-size: 2rem;
    opacity: 0.8;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* 创建按钮特殊效果 */
.btn-success {
    position: relative;
    overflow: hidden;
}

.btn-success::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.btn-success:hover::after {
    width: 300px;
    height: 300px;
}


@media (max-width: 768px) {
    .page-header {
        text-align: center;
    }
    
    .header-actions {
        margin-top: 1rem;
        justify-content: center !important;
    }
    
    .task-stat-card {
        margin-bottom: 1rem;
    }
    
    /* 移动端表格样式 */
    .table-responsive {
        font-size: 0.85rem;
    }
    
    .table th {
        padding: 0.5rem;
    }
    
    .table td {
        padding: 0.5rem;
    }
    
    /* 操作按钮组调整 */
    .btn-group.btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
    }
    
    /* 底部操作按钮调整 */
    .bottom-actions .d-flex {
        flex-direction: column;
        align-items: center !important;
    }
    
    .bottom-actions .action-btn {
        width: 100%;
        max-width: 300px;
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 576px) {
    .header-title {
        font-size: 1.5rem;
    }
    
    .header-subtitle {
        font-size: 1rem;
    }
    
    /* 分页控件调整 */
    .pagination .page-link {
        padding: 0.5rem 0.75rem;
    }
    
    /* 空状态调整 */
    .empty-state {
        padding: 4rem 1rem;
    }
    
    .empty-state i {
        font-size: 4rem;
    }
    
    .empty-state h4 {
        font-size: 1.5rem;
    }
    
    .empty-state p {
        font-size: 1rem;
    }
}

/* 按钮样式 */
.btn-outline-warning {
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.btn-outline-warning:hover {
    background: var(--warning-color);
    color: white;
}

.btn-outline-success {
    color: var(--success-color);
    border-color: var(--success-color);
}

.btn-outline-success:hover {
    background: var(--success-color);
    color: white;
}

.btn-secondary {
    background: var(--dark-color);
    color: white;
}

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 页面头部 */
.page-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: var(--header-padding);
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-deep);
}

.page-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    animation: float 8s ease-in-out infinite;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: float 6s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(180deg); }
}

.header-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.header-subtitle {
    font-size: 1.125rem;
    opacity: 0.9;
    margin: 0.75rem 0 0 0;
    position: relative;
    z-index: 2;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 6rem 2rem;
    color: var(--dark-color);
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.empty-state:hover {
    box-shadow: var(--shadow-deep);
}

.empty-state::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.empty-state i {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    opacity: 0.15;
    transition: var(--transition);
}

.empty-state:hover i {
    opacity: 0.25;
    transform: scale(1.1);
}

.empty-state h4 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--dark-color);
}

.empty-state p {
    font-size: 1.125rem;
    opacity: 0.8;
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* 任务统计 */
.task-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.task-stat-item {
    text-align: center;
    padding: 2rem 1.5rem;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--primary-color);
}

.task-stat-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-deep);
}

.task-stat-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), transparent);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.task-stat-item:hover::after {
    transform: translateY(0);
}

.task-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    line-height: 1;
    transition: var(--transition);
}

.task-stat-item:hover .task-stat-value {
    transform: scale(1.1);
}

.task-stat-label {
    font-size: 0.875rem;
    color: var(--dark-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.75rem;
    display: block;
    font-weight: 600;
}

/* 消息提示样式 */
.alert {
    border-radius: var(--border-radius);
    border: none;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-light);
}

.alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}

.alert-success::before {
    background-color: var(--success-color);
}

.alert-danger::before {
    background-color: var(--danger-color);
}

.alert-warning::before {
    background-color: var(--warning-color);
}

.alert-info::before {
    background-color: var(--info-color);
}

.alert .close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.alert .close:hover {
    opacity: 1;
}

/* 分页控件样式 */
.pagination {
    margin-top: 2rem;
}

.pagination .page-item {
    margin: 0 0.25rem;
}

.pagination .page-link {
    border-radius: 0.5rem;
    border: none;
    background: white;
    color: var(--dark-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    padding: 0.75rem 1rem;
}

.pagination .page-link:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.pagination .page-item.disabled .page-link {
    background: var(--light-color);
    color: var(--border-color);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 底部操作按钮 */
.bottom-actions {
    background: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    margin-top: 2rem;
    transition: var(--transition);
}

.bottom-actions:hover {
    box-shadow: var(--shadow-hover);
}

/* 操作按钮样式 */
.action-btn {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    min-width: 150px;
    height: 45px;
}

.action-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 底部操作区样式增强 */
.bottom-actions {
    margin-top: 2rem !important;
    padding: 1.5rem;
    background-color: #ffffff;
    border-top: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 底部按钮特定样式 */
.bottom-actions .action-btn {
    margin: 0.5rem;
}

/* 二级按钮样式 */
.action-btn.btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

.action-btn.btn-secondary:hover {
    background-color: #5c636a !important;
    border-color: #565e64 !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
}

/* 信息按钮样式 */
.action-btn.btn-info {
    background-color: #13caf0 !important;
    border-color: #13caf0 !important;
    color: white !important;
}

.action-btn.btn-info:hover {
    background-color: #0baccf !important;
    border-color: #0aa2c0 !important;
    box-shadow: 0 4px 12px rgba(13, 202, 240, 0.3) !important;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    opacity: 0.8;
}

/* 加载动画 */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 淡入动画 */
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 描述文本展开动画 */
@keyframes expandDescription {
    0% { max-height: 20px; }
    100% { max-height: 200px; }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* 响应式设计 */
@media (max-width: 1400px) {
    .task-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .task-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .task-table thead {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--bg-color);
    }
    
    .header-padding {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .page-header {
        text-align: center;
        padding: 1.5rem 1rem;
    }
    
    .header-title {
        font-size: 1.75rem;
        justify-content: center;
    }
    
    .task-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .task-stat-item {
        padding: 1.25rem;
    }
    
    .task-table th,
    .task-table td {
        padding: 1rem 0.75rem;
    }
    
    .task-table th {
        font-size: 0.875rem;
        white-space: nowrap;
    }
    
    .task-table td {
        font-size: 0.875rem;
    }
    
    .description-container {
        max-width: 150px;
    }
    
    .description-container:hover {
        max-width: 250px;
    }
    
    .action-buttons {
        justify-content: center;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .action-btn {
        justify-content: center;
        min-width: auto;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .bottom-actions {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 576px) {
    .header-title {
        font-size: 1.5rem;
    }
    
    .header-subtitle {
        font-size: 1rem;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
    }
    
    .font-weight-semibold {
        font-size: 0.875rem;
    }
    
    .description-container {
        max-width: 100px;
    }
    
    .description-container:hover {
        max-width: 200px;
    }
    
    .empty-state {
        padding: 4rem 1rem;
    }
    
    .empty-state i {
        font-size: 3rem;
    }
    
    .empty-state h4 {
        font-size: 1.5rem;
    }
    
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .pagination .page-item {
        margin: 0.25rem;
    }
    
    .pagination .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    /* 移动端优化：任务行卡片式布局 */
    @media (max-width: 480px) {
        .table {
            border: none;
            box-shadow: none;
        }
        
        .table tbody {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .task-row {
            display: block;
            border: 1px solid #dee2e6; /* 使用Bootstrap的边框颜色变量 */
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .task-row:hover {
            transform: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .task-row td {
            display: block;
            width: 100%;
            text-align: left;
            padding: 0.5rem 1rem;
            border-bottom: 1px solid #dee2e6;
        }
        
        .task-row td:last-child {
            border-bottom: none;
            padding-bottom: 1rem;
        }
        
        .table thead {
            display: none;
        }
        
        /* 为移动端数据项添加标签 */
        .task-row td:not(:last-child):before {
            content: attr(data-label);
            font-weight: 600;
            color: #6c757d;
            display: block;
            margin-bottom: 0.25rem;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .task-row td {
            position: relative;
        }
        
        .description-container {
            max-width: 100%;
        }
        
        .btn-group {
            flex-direction: row !important;
            flex-wrap: wrap !important;
            justify-content: flex-start !important;
        }
        
        .btn-group .btn {
            margin: 0.25rem !important;
        }
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h2">
            <i class="fa fa-clock mr-3"></i>{{ title }}
        </h1>
        <div>
            <a href="{% url 'tasks:scheduled_task_create' %}" class="btn btn-success">
                <i class="fa fa-plus mr-2"></i>创建定时任务
            </a>
        </div>
    </div>

    <!-- 消息提示已在base模板中处理 -->

    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white task-stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ total_tasks }}</h4>
                            <p class="card-text">总任务数</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-tasks fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white task-stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ active_tasks }}</h4>
                            <p class="card-text">已启用任务</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-check-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white task-stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ inactive_tasks }}</h4>
                            <p class="card-text">已禁用任务</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-pause-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white task-stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ last_24h_executions }}</h4>
                            <p class="card-text">24小时内执行</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-history fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 任务列表 -->
    {% if page_obj %}
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">
                <i class="fa fa-list mr-2"></i> 定时任务列表
            </h5>
            <span class="badge bg-secondary">{{ total_tasks }}</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th width="20%"><i class="fa fa-cog mr-2"></i>任务名称</th>
                            <th width="15%"><i class="fa fa-calendar-alt mr-2"></i>Cron表达式</th>
                            <th width="20%"><i class="fa fa-file-alt mr-2"></i>描述</th>
                            <th width="15%"><i class="fa fa-history mr-2"></i>最后执行</th>
                            <th width="10%"><i class="fa fa-power-off mr-2"></i>状态</th>
                            <th width="10%"><i class="fa fa-user mr-2"></i>创建者</th>
                            <th width="10%"><i class="fa fa-ellipsis-h mr-2"></i>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for task in page_obj %}
                        <tr class="task-row">
                            <td data-label="任务名称">
                                <div class="font-weight-semibold text-dark">
                                    <i class="fa fa-file-alt text-primary mr-2"></i>{{ task.name }}
                                </div>
                                <div class="text-xs text-muted mt-1">
                                    创建于 {{ task.created_at|date:"Y-m-d H:i:s" }}
                                </div>
                            </td>
                            <td data-label="Cron表达式">
                                <span class="font-mono bg-gray-50 px-2 py-1 rounded text-sm">
                                    {{ task.cron_expression }}
                                </span>
                            </td>
                            <td data-label="描述">
                                <div class="description-container" data-toggle="tooltip" title="{{ task.description|default:'无' }}">
                                    {{ task.description|default:"无"|truncatechars:30 }}
                                </div>
                            </td>
                            <td data-label="最后执行">
                                {% if task.last_executed_at %}
                                    {{ task.last_executed_at|date:"Y-m-d H:i:s" }}
                                    {% if task.last_execution_status %}
                                        <span class="badge bg-success ml-2">成功</span>
                                    {% else %}
                                        <span class="badge bg-danger ml-2">失败</span>
                                    {% endif %}
                                {% else %}
                                    <span class="text-muted">从未执行</span>
                                {% endif %}
                            </td>
                            <td data-label="状态">
                                {% if task.is_active %}
                                    <span class="badge bg-success">
                                        <i class="fa fa-check-circle mr-1"></i>已启用
                                    </span>
                                {% else %}
                                    <span class="badge bg-warning">
                                        <i class="fa fa-times-circle mr-1"></i>已禁用
                                    </span>
                                {% endif %}
                            </td>
                            <td data-label="创建者">
                                <div class="d-flex items-center">
                                    <i class="fa fa-user-circle text-gray-400 mr-2"></i>
                                    {{ task.created_by.username|default:"系统" }}
                                </div>
                            </td>
                            <td data-label="操作">
                                <div class="btn-group btn-group-sm">
                                    <a href="{% url 'tasks:scheduled_task_edit' task.id %}" class="btn btn-primary btn-sm" title="编辑任务">
                                        <i class="fa fa-edit mr-1"></i>编辑
                                    </a>
                                    
                                    {% if task.is_active %}
                                        <a href="{% url 'tasks:task_execute_now' task.id %}" 
                                           class="btn btn-info btn-sm" 
                                           onclick="return confirm('确定要立即执行该任务吗？')" title="立即执行">
                                            <i class="fa fa-play mr-1"></i>执行
                                        </a>
                                        
                                        <a href="{% url 'tasks:scheduled_task_toggle_status' task.id %}" 
                                           class="btn btn-warning btn-sm" 
                                           onclick="return confirm('确定要禁用该任务吗？')" title="禁用任务">
                                            <i class="fa fa-pause mr-1"></i>禁用
                                        </a>
                                    {% else %}
                                        <button class="btn btn-secondary btn-sm" disabled title="任务已禁用，无法执行">
                                            <i class="fa fa-play mr-1"></i>执行
                                        </button>
                                        
                                        <a href="{% url 'tasks:scheduled_task_toggle_status' task.id %}" 
                                           class="btn btn-success btn-sm" 
                                           onclick="return confirm('确定要启用该任务吗？')" title="启用任务">
                                            <i class="fa fa-play mr-1"></i>启用
                                        </a>
                                    {% endif %}
                                    
                                    <a href="{% url 'tasks:scheduled_task_delete' task.id %}" 
                                       class="btn btn-danger btn-sm" 
                                       onclick="return confirm('确定要删除该定时任务吗？')" title="删除任务">
                                        <i class="fa fa-trash mr-1"></i>删除
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- 分页控件 -->
    {% if page_obj.paginator.num_pages > 1 %}
    <div class="row mt-5">
        <div class="col-12">
            <nav aria-label="Page navigation" class="d-flex justify-content-center">
                <ul class="pagination pagination-lg">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1" aria-label="First">
                                <i class="fa fa-angle-double-left"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                                <i class="fa fa-angle-left"></i>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">
                                <i class="fa fa-angle-double-left"></i>
                            </span>
                        </li>
                        <li class="page-item disabled">
                            <span class="page-link">
                                <i class="fa fa-angle-left"></i>
                            </span>
                        </li>
                    {% endif %}
                    
                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Last">
                                <i class="fa fa-angle-double-right"></i>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">
                                <i class="fa fa-angle-right"></i>
                            </span>
                        </li>
                        <li class="page-item disabled">
                            <span class="page-link">
                                <i class="fa fa-angle-double-right"></i>
                            </span>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
    {% endif %}
    
    <!-- 空状态 -->
    {% else %}
    <div class="empty-state">
        <i class="fa fa-clock"></i>
        <h4>暂无定时任务</h4>
        <p>您还没有创建任何定时任务，点击上方按钮开始创建吧！</p>
        <a href="{% url 'tasks:scheduled_task_create' %}" class="action-btn btn-success mt-3">
            <i class="fa fa-plus mr-2"></i>创建第一个定时任务
        </a>
    </div>
    {% endif %}
    
    <!-- 页面底部操作 -->
    <div class="bottom-actions mt-4">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-center align-items-center flex-wrap gap-3">
                    <a href="{% url 'projects:dashboard' %}" class="btn btn-secondary px-4 py-2">
                        <i class="fa fa-arrow-left mr-2"></i>返回仪表盘
                    </a>
                    <a href="{% url 'tasks:task_execution_logs' %}" class="btn btn-info px-4 py-2">
                        <i class="fa fa-history mr-2"></i>查看执行日志
                    </a>
                    <a href="{% url 'tasks:restart_task_scheduler' %}" 
                       class="btn btn-warning px-4 py-2" 
                       onclick="return confirm('确定要重启任务管理器吗？这将会重新加载所有定时任务。');">
                        <i class="fa fa-refresh mr-2"></i>重启任务管理器
                    </a>
                    <a href="{% url 'tasks:restart_all_services' %}" 
                       class="btn btn-primary px-4 py-2" 
                       onclick="return confirm('确定要通过控制台重启所有服务吗？这将停止现有服务并打开新的控制台窗口。');">
                        <i class="fa fa-refresh mr-2"></i>重启所有服务
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 初始化tooltip和动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 添加表格行淡入动画 - 保持淡入效果
        const taskRows = document.querySelectorAll('.task-row');
        taskRows.forEach((row, index) => {
            row.style.animationDelay = (100 * index) + 'ms';
        });
        
        // 为分页控件添加点击动画
        const pageLinks = document.querySelectorAll('.pagination .page-link');
        pageLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                if (!this.parentElement.classList.contains('disabled')) {
                    this.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        this.style.transform = 'scale(1)';
                    }, 200);
                }
            });
        });
        
        // 添加统计卡片的加载动画
        window.addEventListener('load', function() {
            const statCards = document.querySelectorAll('.task-stat-card');
            statCards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                    card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                }, 200 * index);
            });
        });
    });
</script>
{% endblock %}